<template>
  <div class="wrapper">
    <!-- <el-tabs
      v-model="tabIndex"
      @tab-click="handleTabClick"
      class="tab"
      type="border-card"
    >
      <el-tab-pane label="待考试" name="1"></el-tab-pane>
      <el-tab-pane label="待阅卷" name="2"></el-tab-pane>
    </el-tabs> -->
    <div class="content-wrapper">
      <div class="actions" style="margin-bottom: 10px">
        <div class="left">
          <!-- <el-button type="primary" plain size="mini" @click=""></el-button> -->
        </div>
        <div class="right">
          <el-pagination
            small
            background
            :current-page="paginations.pageIndex"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="paginations.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        align="center"
        @selection-change="handleSelectionChange"
        :max-height="maxheight"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column
          prop=""
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column prop="paper_name" label="试卷名称"> </el-table-column>
        <el-table-column prop="user_nickname" label="考试人员">
        </el-table-column>
        <el-table-column prop="status" label="状态" v-if="tabIndex === '1'">
          <template slot-scope="scope">
            {{ ["待参加", "考试中", "已参加"][scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果">
          <template slot-scope="scope">
            {{ ["未通过", "通过", "待评"][scope.row.result] }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="paper_reader_name" label="阅卷人">
                </el-table-column> -->
        <!-- <el-table-column prop="formwork_list" label="模板">
                <template slot-scope="scope">
                    <div v-for="(item, index) in scope.row.formwork_list" :key="index" class="text item">
                        <el-link :href="item.file_url" target="_blank">{{ item.file_name }}</el-link>
                    </div>
                </template>
            </el-table-column> -->
        <el-table-column
          prop=""
          fixed="right"
          align="center"
          label="操作"
          width="160"
        >
          <template slot-scope="scope">
            <el-button
              v-show="tabIndex === '1'"
              type="text"
              plain
              size="mini"
              @click="handleOperation(scope.row, 'exam')"
            >
              {{ scope.row.status === 2 ? "查看试卷" : "开始考试" }}
            </el-button>
            <el-button
              v-show="tabIndex !== '1'"
              type="text"
              plain
              size="mini"
              @click="handleOperation(scope.row, 'score')"
            >
              去打分
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { ExamRecordList, ExamBegin } from "@/api/qms.js";

export default {
  name: "refundReviewList",
  components: {},
  props: [],
  data() {
    return {
      maxheight: "auto",
      tableData: [],
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      checkedList: [],
      searchParams: {},
      tabIndex: "1",
    };
  },
  mounted() {
    this.getDataList();
  },
  watch: {
    $route: {
      handler(newV, oldV) {
        if (this.$route.query.type == 0) {
          this.tabIndex = "1";
          this.handleTabClick();
        } else if (this.$route.query.type == 1) {
          this.tabIndex = "2";
          this.handleTabClick();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleSelectionChange(checked) {
      this.checkedList = checked.map((item) => item.id);
    },
    handleTabClick() {
      this.getDataList();
    },
    handleOperation(row, mode) {
      if (this.tabIndex === "1" && row.status === 2) {
        this.$router.push({
          name: "exampage",
          query: {
            recordId: row.id,
            paperId: row.paper_id,
            mode: "answer",
          },
        });
      } else {
        this.$router.push({
          name: "exampage",
          query: {
            recordId: row.id,
            paperId: row.paper_id,
            mode,
          },
        });
      }
    },
    // 通过、驳回
    handleClickOperation(type) {
      this.reviewType = type;
      this.dialogVisible = true;
    },
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getDataList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getDataList();
    },
    getDataList() {
      const { user_id } = this.$store.state.user || {};
      // "examination_user_id":0, // 我的考核，传本账号的用户id
      // "exam_paper_reader_id":0, // 我是阅卷人,本账号用户id
      let params = {};
      if (this.tabIndex === "1") {
        params = { examination_user_id: user_id * 1 };
      } else {
        params = { exam_paper_reader_id: user_id * 1 };
      }
      ExamRecordList({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
        ...params,
      }).then((res) => {
        this.tableData = res.data.list || [];
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 245;
        } else {
          this.maxheight = "auto";
        }
        this.paginations.total = res.data.pagination.total;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// /deep/ .el-tabs__nav-wrap {
//   left: -154px;
// }
.wrapper {
  padding: 10px 15px;
  background-color: #fff;

  .orderHeader {
    margin-top: 5px;
    background-color: #fff;

    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;

    .el-button + .el-dropdown,
    .el-dropdown + .el-button {
      margin-left: 10px;
    }
  }

  .tab.el-tabs--border-card {
    border: none;
    box-shadow: none;

    .el-tabs__content {
      padding: 0;
      height: 40px;
    }
  }

  /deep/.tab.el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
}
</style>